<template>
	<view class="card-detail">
		<view class="top">
			<view class="card-pack-item pr"
				:style="{ backgroundImage: `url(${assetsPath}${data.inventory === 0 ? 'dd094419c06505ea3edb73a2cfdbe59a19fb8051' : '5f02c7ef74bbed9aa39718a8e173dbdbaf59d2c8'}.png)` }" >
				<view class="flex-align">
					<!-- <u-image :src="data.venue_thumb" width="56rpx" height="56rpx" shape="square"></u-image> -->
					<u-image :src="`${assetsPath}f0d9a5af94d5830bf6b6e97ce69eddd62415923d.png`" width="30rpx" height="30rpx" shape="square"></u-image>
					<view style="margin-left: 13rpx;">{{ data.venue_name }}</view>
				</view>
				<view >
					<navigator :url="`/pages/personal/qrcode/qrcode?goods_name=${data.goods_name}&ticketno=${data.ticket_no}&title=我的票包&choose=选择票&goods_image=${data.goods_image}`"
							v-if="currentTab === 0" style="width: 100rpx; height: 100rpx;margin-left: 88%;margin-top: -70rpx;">
						<view class="qrcode">
							<u-image :src="`${assetsPath}471fbc0270836819ce3cf990613a3592d1bf581b.png`" width="52rpx"
								height="52rpx"></u-image>
						</view>
					</navigator>
			
					<view @click="$emit('click')" style="margin-top: 30rpx;">
						<!-- <view class="flex-between" style="margin: 0rpx 0 30rpx;">
							<view style=" width: 100rpx; height: 40rpx;background-color: aliceblue;border-radius:10rpx;color: #97b717 ;font-size: 26rpx;text-align: center;line-height: 40rpx;" ><text>预约</text> </view>
							<view class="name">{{ data.goods_name }}</view>
						</view> -->
						<view class="flex-align">
							<view style=" width: 100rpx; height: 40rpx;background-color: aliceblue;border-radius:10rpx;color: #ffaa00 ;font-size: 26rpx;text-align: center;line-height: 40rpx;" v-if="data.inventory === 0"><text>预约</text> </view>
							<view class="name" >{{ data.goods_name }}</view>
						</view>
						<view class="flex-align">
							<view class="name" style="margin-top: 20rpx;">no.{{ data.ticket_no }}</view>
						</view>
						<!-- <view class="name"v-if="data.inventory === 0" >有效期{{ data.sku_info }}</view> -->
						<view class="flex-between bottom">
							<!-- <view v-if="data.yxq != '长期有效'">
								{{data.days}}次
							</view>
							<view v-else>
								
							</view> -->
							<view>
								{{data.days}}次
							</view>
							<!-- <view class="date" v-if="data.specify == null">有效期至{{ addDate(data.starttime, data.days) }}</view> -->
							<!-- <view class="date" v-if="data.inventory === 0" >有效期{{ data.sku_info }}</view> -->
							<view class="date"   v-if="data.is_yxq == null && data.inventory == 1">长期有效</view>
							<view class="date"  v-else>{{ data.yxq }}</view>
						</view>
					</view>
				</view>
			</view>
			<view style="margin-top: 30rpx;font-weight: 700;font-size: 30rpx;">
				接收人
			</view>
			<view style="width: 100%;height: 50rpx;margin-top: 20rpx;" >
				<view style="width: 10%;height: 50rpx;float: left;margin-top: 15rpx;">
					<image style="width: 50rpx;height: 50rpx;"
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/22e99971a7b5d0134a9177ff165967f855012c3b.png"
						mode=""></image>
				</view>
				<view
					style="width: 30%;height: 48rpx;float: left;font-size: 22rpx;margin-top: 20rpx;background-color: #fff;padding-left: 10rpx;">
					<input type="number" placeholder="接收人手机号">
				</view>
				<view style="width: 4%;height: 50rpx;float: left;line-height: 80rpx;margin-left: 1%;">
					-
				</view>
				<view
					style="width: 30%;height: 48rpx;float: left;font-size: 22rpx;margin-top: 20rpx;background-color: #fff;padding-left: 10rpx;">
					<input type="text" placeholder="接收人姓名">
				</view>
				<view style="width: 20%;height: 50rpx;float: right;margin-top: 18rpx;line-height: 50rpx;font-size: 26rpx;" @click="card_recipientlist">
					<!-- <u-icon name="arrow-right" size="16" color="#999999"></u-icon> -->
					我的好友
				</view>
			</view>
			<!-- <view style="margin-top: 40rpx;font-weight: 700;font-size: 30rpx;">
				手续费
			</view>
			<view class="" style="width: 100%;height: 100rpx;background-color: #fff;margin-top: 30rpx;">
				<view class=""
					style="width: 60%;height: 48rpx;float: left;font-size: 40rpx;line-height: 100rpx;margin-left: 20rpx;font-weight: 600;">
					246
				</view>
				<view class="" style="width: 10%;height: 50rpx;float: right;line-height: 100rpx;">
					元
				</view>
			</view> -->
			<view style="width: 100%; height: auto;background: #fff; padding: 20rpx 30rpx; font-size: ;
			margin-top: 45rpx;
			background-color: white;
			border-radius: 7px;">
				<view style="width: 100%;height: 40rpx;font-size: 26rpx;
								font-weight: 500;
								color: #333333;">备注</view>
				<textarea placeholder=" " class="input-textare" height="200rpx" margin-top='20rpx'
					placeholder-style="font-size: 26rpx" v-model="order_remarks" />
			</view>
			<view class="" style="width: 92%;height: 100rpx;position: absolute;bottom: 10rpx;">
				<button style="background-color: #6c6eff; color: #fff;border-radius: 50rpx 50rpx;" type="default">确认转赠</button>
			</view>
		</view>


	</view>
</template>

<script>
	import cardPackItem from '@/pages/personal/card-pack/card-pack-item.vue'
	const index = require('@/api/personal/index.js')
	const person = require("@/api/personal/index.js");
	export default {
		components: {
			cardPackItem
		},
		data() {
			return {
				assetsPath: this.$https.assetsPath,
				data: {},
				ticketno: '',
				id: 0,
			}
		},
		onLoad(options) {
			console.log(options,'111')
			this.ticketno = options.ticketno
			this.getMyTicketDetail()
		},
		methods: {
			card_recipientlist(){
				console.log(11122)
				uni.navigateTo({
					url:'../../pages_other/cardbag/card_recipient'
				})
			},
			gocard(index) {
				this.selectcard = index
			},

			// 获取我的票券详情
			async getMyTicketDetail() {
				let postData = {
					project_id: getApp().globalData.projectId,
					open_id: uni.getStorageSync("openid"),
					appid: this.$https.weixinAppId,
					ticketno: this.ticketno
				}
				let res = await person.getMyTicketDetail(postData)
				if (res.code === 1) {
					this.data = res.data.ticketData
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	@import url("@/static/css/personal/index.css");

	.card-detail {
		padding-bottom: env(safe-area-inset-bottom);
		background-color: #eeeeee;
		height: 100vh;

		.top {
			padding: 30rpx;
			card-pack-item+card-pack-item {
				.card-pack-item {
					margin-top: 30rpx;
				}
			}
			
			.card-pack-item {
				color: #fff;
				width: 690rpx;
				height: 296rpx;
				padding: 18rpx 30rpx 50rpx 18rpx;
				background-position: left top;
				background-repeat: no-repeat;
				background-size: 100% 100%;
			
				&+.card-pack-item {
					margin-top: 30rpx;
				}
			
				&.lapse {
			
					.bottom,
					.balance {
						color: #fff !important;
					}
				}
			
				.number {
					text {
						font-size: 36rpx;
						font-weight: bold;
					}
				}
			
				.name {
					font-size: 32rpx;
					padding-left: 15rpx;
				}
			
				.bottom {
					color: #fff !important;
					font-size: 28rpx;
					padding-top: 45rpx;
					.balance {
						font-size: 48rpx;
						color: #fff !important;
						margin-right: 10rpx;
						font-weight: bold;
					}
				}
			
				.qrcode {
					position: absolute;
					right: 10rpx;
					top: 10rpx;
				}
			}
			.item {
				padding: 20rpx 30rpx;
				position: relative;
				height: 290rpx;
				background-color: #2f75fa;
				// filter: drop-shadow(0px 13rpx 57rpx rgba(8,73,162,0.11));
				border-radius: 20rpx;
			
				&+.item {
					margin-top: 30rpx;
				}
			
				&::after,
				&::before {
					content: "";
					position: absolute;
					top: 192rpx;
					border-radius: 50%;
					background-color: rgb(249, 249, 249);
					width: 30rpx;
					height: 30rpx;
					z-index: 1;
				}
			
				&::after {
					left: -15rpx;
				}
			
				&::before {
					right: -15rpx;
				}
			
				.line {
					top: 207rpx;
					left: 0;
					border-top: 1rpx dashed #fff;
					width: 100%;
				}
			
				.name {
					font-size: 40rpx;
					font-weight: bold;
					margin: 10rpx 0;
					color: #fff;
			
					.ticketName {
						width: 611rpx;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}
			
					.round {
						width: 20rpx;
						height: 20rpx;
						margin-right: 11rpx;
						background-color: rgb(47, 117, 250);
						border-radius: 50%;
					}
				}
			
				.minute {
					line-height: 34rpx;
					font-size: 26rpx;
					color: #fff;
			
					text {
						font-size: 44rpx;
					}
				}
			
				.expiration {
					font-size: 28rpx;
					color: #fff;
				}
			
				.bottom {
					font-size: 28rpx;
					margin-top: 40rpx;
					color: rgb(153, 153, 153);
				}
			
				.qrcode {
					right: 10rpx;
					top: 10rpx;
				}
			}
		}
	}
</style>